<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏记录与统计 - 龙虎斗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-attachment: fixed;
            min-height: 100vh;
            color: #333;
            transition: background 0.3s ease;
        }

        /* 主题颜色样式 */
        body.theme-blue {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-green {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-orange {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-purple {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-pink {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-red {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-yellow {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-cyan {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-lime {
            background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-indigo {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-teal {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-rose {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-amber {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-emerald {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-sky {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            background-attachment: fixed !important;
        }

        body.theme-violet {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            background-attachment: fixed !important;
        }

        .container {
            max-width: 480px;
            margin: 0 auto;
            background: transparent;
            min-height: 100vh;
            position: relative;
        }

        .header {
            background: rgba(102, 126, 234, 0.9);
            backdrop-filter: blur(10px);
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .back-btn {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
        }

        .header h1 {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }

        .filter-btn {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .filter-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.1);
        }

        /* 筛选弹框样式 */
        .filter-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            backdrop-filter: blur(10px);
        }

        .filter-modal.show {
            display: flex;
        }

        .filter-content {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            border-radius: 25px;
            padding: 30px;
            width: 90%;
            max-width: 420px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: modalSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-60px) scale(0.85);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(102, 126, 234, 0.2);
        }

        .filter-title {
            font-size: 22px;
            font-weight: 700;
            color: #495057;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-title::before {
            content: '🔍';
            font-size: 20px;
        }

        .close-btn {
            background: rgba(102, 126, 234, 0.1);
            border: none;
            font-size: 20px;
            color: #667eea;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            background: rgba(102, 126, 234, 0.2);
            color: #5a6fd8;
            transform: scale(1.1);
        }

        .filter-group {
            margin-bottom: 30px;
            background: rgba(248, 249, 250, 0.6);
            border-radius: 18px;
            padding: 20px;
            border: 1px solid rgba(233, 236, 239, 0.4);
        }

        .filter-group-title {
            font-size: 17px;
            font-weight: 700;
            color: #495057;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(102, 126, 234, 0.15);
        }

        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .filter-option {
            background: rgba(255, 255, 255, 0.8);
            border: 2px solid rgba(233, 236, 239, 0.6);
            border-radius: 25px;
            padding: 10px 18px;
            font-size: 14px;
            font-weight: 500;
            color: #495057;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            user-select: none;
            position: relative;
            overflow: hidden;
        }

        .filter-option::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s ease;
        }

        .filter-option:hover::before {
            left: 100%;
        }

        .filter-option:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(102, 126, 234, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
        }

        .filter-option.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #667eea;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }

        .filter-option.selected:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a5acd 100%);
            border-color: #5a6fd8;
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
        }

        .filter-actions {
            display: flex;
            gap: 18px;
            margin-top: 35px;
            padding-top: 25px;
            border-top: 2px solid rgba(233, 236, 239, 0.3);
        }

        .filter-btn-primary {
            flex: 1;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 15px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }

        .filter-btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .filter-btn-primary:hover::before {
            left: 100%;
        }

        .filter-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
        }

        .filter-btn-secondary {
            flex: 1;
            background: rgba(248, 249, 250, 0.8);
            color: #6c757d;
            border: 2px solid rgba(233, 236, 239, 0.6);
            padding: 16px;
            border-radius: 15px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .filter-btn-secondary:hover {
            background: rgba(233, 236, 239, 0.8);
            border-color: rgba(102, 126, 234, 0.3);
            color: #495057;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        /* 图标样式 */
        .option-icon {
            margin-right: 8px;
            font-size: 16px;
            opacity: 0.8;
        }

        .filter-option.selected .option-icon {
            opacity: 1;
        }

        .btn-icon {
            margin-right: 8px;
            font-size: 16px;
        }

        /* 响应式优化 */
        @media (max-width: 480px) {
            .filter-content {
                width: 95%;
                padding: 25px;
                max-height: 90vh;
            }

            .filter-group {
                padding: 18px;
                margin-bottom: 25px;
            }

            .filter-options {
                gap: 10px;
            }

            .filter-option {
                padding: 8px 16px;
                font-size: 13px;
            }

            .filter-actions {
                gap: 15px;
                margin-top: 30px;
            }

            .filter-btn-primary,
            .filter-btn-secondary {
                padding: 14px;
                font-size: 15px;
            }
        }

        .records-content {
            padding: 20px;
        }

        /* 统计卡片 */
        .stats-section {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 18px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(233, 236, 239, 0.8);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .stats-title {
            color: #495057;
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 12px;
            border-bottom: 2px solid #e9ecef;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }

        /* 游戏记录列表 */
        .records-section {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 18px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(233, 236, 239, 0.8);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .records-title {
            color: #495057;
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 12px;
            border-bottom: 2px solid #e9ecef;
        }

        .record-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid rgba(233, 236, 239, 0.6);
            transition: background 0.3s ease;
        }

        .record-item:last-child {
            border-bottom: none;
        }

        .record-item:hover {
            background: rgba(248, 249, 250, 0.8);
            border-radius: 10px;
            padding: 15px 15px;
            margin: 0 -15px;
        }

        .record-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .record-icon.win {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }

        .record-icon.lose {
            background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
            color: white;
        }

        .record-icon.draw {
            background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%);
            color: white;
        }

        .record-details {
            flex: 1;
            min-width: 0;
        }

        .record-result {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .record-result.win {
            color: #28a745;
        }

        .record-result.lose {
            color: #dc3545;
        }

        .record-result.draw {
            color: #6c757d;
        }

        .record-info {
            font-size: 13px;
            color: #6c757d;
            display: flex;
            gap: 15px;
        }

        .record-score {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
        }



        /* 响应式设计 */
        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }



            .record-info {
                flex-direction: column;
                gap: 8px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <button class="back-btn" onclick="goBack()">←</button>
            <h1>游戏记录与统计</h1>
            <button class="filter-btn" onclick="openFilterModal()">🔍</button>
        </div>

        <div class="records-content">
            <!-- 页面说明 -->
            <div class="info-section" style="background: rgba(102, 126, 234, 0.1); border-radius: 15px; padding: 20px; margin-bottom: 20px; border-left: 4px solid #667eea;">
                <div style="display: flex; align-items: center; gap: 12px; color: #495057;">
                    <span style="font-size: 20px;">ℹ️</span>
                    <div>
                        <div style="font-weight: 600; margin-bottom: 5px;">游戏记录与统计</div>
                        <div style="font-size: 14px; color: #6c757d;">此页面包含您的游戏统计数据、最近游戏记录和成就信息</div>
                    </div>
                </div>
            </div>

            <!-- 统计概览 -->
            <div class="stats-section">
                <h3 class="stats-title">
                    <span>📊</span>
                    统计概览
                </h3>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value" id="totalGames">0</div>
                        <div class="stat-label">总游戏数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="winRate">0%</div>
                        <div class="stat-label">胜率</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="winStreak">0</div>
                        <div class="stat-label">最高连胜</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="totalScore">0</div>
                        <div class="stat-label">总积分</div>
                    </div>
                </div>
            </div>

            <!-- 最近游戏记录 -->
            <div class="records-section">
                <h3 class="stats-title">
                    <span>🎮</span>
                    最近游戏记录
                </h3>
                <div id="recentRecords">
                    <!-- 游戏记录将通过JavaScript动态生成 -->
                </div>
            </div>


        </div>

        <!-- 筛选弹框 -->
        <div class="filter-modal" id="filterModal">
            <div class="filter-content">
                <div class="filter-header">
                    <div class="filter-title">筛选游戏记录</div>
                    <button class="close-btn" onclick="closeFilterModal()">×</button>
                </div>

                <!-- 对局结果筛选 -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <span>🏆</span>
                        对局结果
                    </div>
                    <div class="filter-options">
                        <div class="filter-option" data-filter="result" data-value="win" onclick="toggleFilterOption(this)">
                            <span class="option-icon">✅</span>
                            胜利
                        </div>
                        <div class="filter-option" data-filter="result" data-value="lose" onclick="toggleFilterOption(this)">
                            <span class="option-icon">❌</span>
                            失败
                        </div>
                        <div class="filter-option" data-filter="result" data-value="draw" onclick="toggleFilterOption(this)">
                            <span class="option-icon">🤝</span>
                            平局
                        </div>
                    </div>
                </div>

                <!-- 游戏类型筛选 -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <span>🎮</span>
                        游戏类型
                    </div>
                    <div class="filter-options">
                        <div class="filter-option" data-filter="type" data-value="normal" onclick="toggleFilterOption(this)">
                            <span class="option-icon">🎯</span>
                            普通模式
                        </div>
                        <div class="filter-option" data-filter="type" data-value="challenge" onclick="toggleFilterOption(this)">
                            <span class="option-icon">🔥</span>
                            挑战模式
                        </div>
                        <div class="filter-option" data-filter="type" data-value="tournament" onclick="toggleFilterOption(this)">
                            <span class="option-icon">🏆</span>
                            锦标赛
                        </div>
                        <div class="filter-option" data-filter="type" data-value="practice" onclick="toggleFilterOption(this)">
                            <span class="option-icon">📚</span>
                            练习模式
                        </div>
                    </div>
                </div>

                <!-- 时间范围筛选 -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <span>📅</span>
                        时间范围
                    </div>
                    <div class="filter-options">
                        <div class="filter-option" data-filter="time" data-value="today" onclick="toggleFilterOption(this)">
                            <span class="option-icon">☀️</span>
                            今天
                        </div>
                        <div class="filter-option" data-filter="time" data-value="week" onclick="toggleFilterOption(this)">
                            <span class="option-icon">📆</span>
                            本周
                        </div>
                        <div class="filter-option" data-filter="time" data-value="month" onclick="toggleFilterOption(this)">
                            <span class="option-icon">🗓️</span>
                            本月
                        </div>
                        <div class="filter-option" data-filter="time" data-value="all" onclick="toggleFilterOption(this)">
                            <span class="option-icon">∞</span>
                            全部
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="filter-actions">
                    <button class="filter-btn-secondary" onclick="resetFilters()">
                        <span class="btn-icon">🔄</span>
                        重置筛选
                    </button>
                    <button class="filter-btn-primary" onclick="applyFilters()">
                        <span class="btn-icon">✅</span>
                        确定筛选
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 返回上一页
        function goBack() {
            window.history.back();
        }

        // 应用主题颜色
        function applyTheme(theme) {
            console.log('游戏记录页面应用主题:', theme);
            
            // 移除所有主题类
            const body = document.body;
            const allThemes = ['theme-blue', 'theme-green', 'theme-orange', 'theme-purple', 
                              'theme-pink', 'theme-red', 'theme-yellow', 'theme-cyan', 
                              'theme-lime', 'theme-indigo', 'theme-teal', 'theme-rose', 
                              'theme-amber', 'theme-emerald', 'theme-sky', 'theme-violet'];
            
            allThemes.forEach(themeClass => {
                body.classList.remove(themeClass);
            });
            
            // 添加新主题类
            if (theme && theme !== 'default') {
                body.classList.add('theme-' + theme);
                console.log('已应用主题类:', 'theme-' + theme);
            }
        }

        // 检查并同步主题
        function checkAndSyncTheme() {
            const savedTheme = localStorage.getItem('selectedTheme');
            const lastUpdateTime = localStorage.getItem('themeUpdateTime');
            
            if (savedTheme && lastUpdateTime) {
                console.log('检测到保存的主题:', savedTheme);
                applyTheme(savedTheme);
            }
        }

        // 监听主题变化
        function startThemeListener() {
            let lastThemeUpdateTime = localStorage.getItem('themeUpdateTime') || '0';
            
            // 定期检查主题更新
            setInterval(() => {
                const currentThemeUpdateTime = localStorage.getItem('themeUpdateTime') || '0';
                
                if (currentThemeUpdateTime !== lastThemeUpdateTime) {
                    console.log('检测到主题更新');
                    lastThemeUpdateTime = currentThemeUpdateTime;
                    
                    const savedTheme = localStorage.getItem('selectedTheme');
                    if (savedTheme) {
                        console.log('同步新主题:', savedTheme);
                        applyTheme(savedTheme);
                    }
                }
            }, 500);
        }

        // 生成模拟游戏数据
        function generateMockData() {
            // 模拟游戏统计数据
            const mockStats = {
                totalGames: 156,
                winRate: 68,
                winStreak: 12,
                totalScore: 2847
            };

            // 更新统计显示
            document.getElementById('totalGames').textContent = mockStats.totalGames;
            document.getElementById('winRate').textContent = mockStats.winRate + '%';
            document.getElementById('winStreak').textContent = mockStats.winStreak;
            document.getElementById('totalScore').textContent = mockStats.totalScore;

            // 生成最近游戏记录
            const mockRecords = [
                { result: 'win', score: '15-8', time: '2分钟前', opponent: '玩家A' },
                { result: 'lose', score: '12-15', time: '5分钟前', opponent: '玩家B' },
                { result: 'win', score: '15-10', time: '8分钟前', opponent: '玩家C' },
                { result: 'win', score: '15-6', time: '12分钟前', opponent: '玩家D' },
                { result: 'draw', score: '15-15', time: '15分钟前', opponent: '玩家E' },
                { result: 'win', score: '15-11', time: '20分钟前', opponent: '玩家F' }
            ];

            const recordsContainer = document.getElementById('recentRecords');
            recordsContainer.innerHTML = '';

            mockRecords.forEach(record => {
                const recordElement = document.createElement('div');
                recordElement.className = 'record-item';
                
                const iconClass = record.result === 'win' ? 'win' : record.result === 'lose' ? 'lose' : 'draw';
                const resultText = record.result === 'win' ? '胜利' : record.result === 'lose' ? '失败' : '平局';
                
                recordElement.innerHTML = `
                    <div class="record-icon ${iconClass}">
                        ${record.result === 'win' ? '🏆' : record.result === 'lose' ? '💔' : '🤝'}
                    </div>
                    <div class="record-details">
                        <div class="record-result ${iconClass}">${resultText}</div>
                        <div class="record-info">
                            <span>vs ${record.opponent}</span>
                            <span>${record.time}</span>
                        </div>
                    </div>
                    <div class="record-score">${record.score}</div>
                `;
                
                recordsContainer.appendChild(recordElement);
            });
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('游戏记录页面加载完成');
            
            // 检查并同步主题
            checkAndSyncTheme();
            
            // 启动主题监听器
            startThemeListener();
            
            // 监听页面可见性变化
            document.addEventListener('visibilitychange', function() {
                if (!document.hidden) {
                    console.log('页面变为可见，检查主题更新');
                    checkAndSyncTheme();
                }
            });
            
            // 生成模拟数据
            generateMockData();
            
            console.log('主题同步功能已启动');
            console.log('当前保存的主题:', localStorage.getItem('selectedTheme'));
            console.log('主题更新时间:', localStorage.getItem('themeUpdateTime'));
        });

        // 筛选相关变量
        let currentFilters = {
            result: [],
            type: [],
            time: []
        };

        // 打开筛选弹框
        function openFilterModal() {
            document.getElementById('filterModal').classList.add('show');
            document.body.style.overflow = 'hidden';
        }

        // 关闭筛选弹框
        function closeFilterModal() {
            document.getElementById('filterModal').classList.remove('show');
            document.body.style.overflow = 'auto';
        }

        // 切换筛选选项
        function toggleFilterOption(element) {
            const filterType = element.getAttribute('data-filter');
            const filterValue = element.getAttribute('data-value');
            
            if (element.classList.contains('selected')) {
                // 取消选择
                element.classList.remove('selected');
                const index = currentFilters[filterType].indexOf(filterValue);
                if (index > -1) {
                    currentFilters[filterType].splice(index, 1);
                }
            } else {
                // 选择
                element.classList.add('selected');
                if (!currentFilters[filterType].includes(filterValue)) {
                    currentFilters[filterType].push(filterValue);
                }
            }
        }

        // 重置筛选
        function resetFilters() {
            // 清除所有选中状态
            document.querySelectorAll('.filter-option.selected').forEach(option => {
                option.classList.remove('selected');
            });
            
            // 重置筛选变量
            currentFilters = {
                result: [],
                type: [],
                time: []
            };
            
            // 重新生成数据
            generateMockData();
            
            // 关闭弹框
            closeFilterModal();
        }

        // 应用筛选
        function applyFilters() {
            console.log('应用筛选:', currentFilters);
            
            // 根据筛选条件过滤数据
            filterGameRecords();
            
            // 关闭弹框
            closeFilterModal();
        }

        // 根据筛选条件过滤游戏记录
        function filterGameRecords() {
            // 这里可以根据currentFilters来过滤游戏记录
            // 目前先重新生成数据，实际应用中应该根据筛选条件查询数据库
            
            // 显示筛选状态
            showFilterStatus();
            
            // 重新生成数据（模拟筛选效果）
            generateMockData();
        }

        // 显示筛选状态
        function showFilterStatus() {
            let filterText = '';
            let hasFilters = false;
            
            if (currentFilters.result.length > 0) {
                filterText += `结果: ${currentFilters.result.join(', ')} `;
                hasFilters = true;
            }
            
            if (currentFilters.type.length > 0) {
                filterText += `类型: ${currentFilters.type.join(', ')} `;
                hasFilters = true;
            }
            
            if (currentFilters.time.length > 0) {
                filterText += `时间: ${currentFilters.time.join(', ')} `;
                hasFilters = true;
            }
            
            if (hasFilters) {
                // 在页面上显示筛选状态
                console.log('当前筛选条件:', filterText);
                // 这里可以在页面上添加筛选状态显示
            }
        }

        // 点击弹框外部关闭弹框
        document.addEventListener('click', function(event) {
            const modal = document.getElementById('filterModal');
            if (event.target === modal) {
                closeFilterModal();
            }
        });
    </script>
</body>
</html>
